<template >
    <div>
        <!-- @tab-click="handleClick"  -->
        <div class="tab">
            <el-tabs v-model="activeName"  type="card"  closable @tab-remove="removeTab"   >
                <el-tab-pane v-for="(item,index) in tablist"  :key="index" :label="item.title" :name="JSON.stringify(index)"><span @click="update(index)">{{item.text}}</span></el-tab-pane>
            </el-tabs>
            <el-button @click="add"  class="but" >+</el-button>
        </div>
        <div class="box" v-show="isEdit" >
           title: <el-input v-model="title1" placeholder="请输入内容"></el-input>
           text: <el-input v-model="text1" placeholder="请输入内容"></el-input>
            <button @click="do_update" class="butt" >修改</button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tablist:[],
            activeName: "0",
            isEdit:false,
            index:0,
            title1:'',
            text1:''
        }
    },
    created(){
        this.tablist = JSON.parse(localStorage.getItem('tablist'))|| []
      
    },
    methods: {
        // 添加
        add(){
          var obj = {title:"新建tab栏",text:"新建tab栏" , name:'new tab' }
          this.tablist.push(obj)
        },
        // 删除
        removeTab(name) {
          this.tablist.splice(name,1)
        },
        // 编辑
        update(index){
          this.isEdit = true,
          this.index = index,
          this.title1 = this.tablist[index].title,
          this.text1= this.tablist[index].text
        },
        do_update(){
            let index = this.index
            this.tablist[index].title = this.title1,
            this.tablist[index].text = this.text1
            this.isEdit = false
        }
       
    },
    watch:{
        tablist:{
            deep:true,
            handler(val){
                localStorage.setItem('tablist', JSON.stringify(this.tablist))
            }
        }
    }
}
</script>
<style >
.tab {
    width: 500px;
    height: 300px;
    border: 1px solid #000;
    position: relative;
}
.el-button{
    position: absolute;
    top: 1px;
    right: -55px;
}
.box{
    width: 500px;
    height: 150px;
}
.butt{
    width: 80px;
    height: 40px;
    background-color: transparent;
    border-radius: 3px;
    border: 1px solid rgb(194, 194, 194);
}
</style>